<template>
  <div :id="id"
       :style="chartStyle">
    <slot></slot>
  </div>
</template>
<script lang="ts">
import { Vue, Component, Watch, Prop } from "vue-property-decorator";
import echarts from "echarts";
import defaultImange from "./bgBlue.png";
@Component
export default class DdLine extends Vue {
  myChart: any = null;
  // chart图表的总体样式 ，如宽 高 、background等
  @Prop({
    type: String,
    default: "width:600px;height:200px;"
  })
  chartStyle!: string;

  // echarts 所在的id
  @Prop({
    type: String,
    default() {
      let idStr = "";
      for (let i = 0; i < 6; i++) {
        let randomChar: string = String.fromCharCode(
          65 + Math.floor(Math.random() * 19) + i
        );
        idStr += randomChar;
      }
      return idStr;
    }
  })
  id!: string;

  // 鼠标悬移提示内边距
  @Prop({
    type: Array,
    default() {
      return [5, 10, 5, 10];
    }
  })
  tooltippadding!: any;

  // charts item  color,
  @Prop({
    type: Array,
    default() {
      return ["#6be1c1", "#5f9dff"];
    }
  })
  itemColor!: any;

  // 提示框的位置 右边距
  @Prop({
    type: String,
    default: "0px"
  })
  toolboxRight!: string;

  // 提示框的位置 上边距
  @Prop({
    type: String,
    default: "10px"
  })
  toolboxTop!: string;

  // 是否显示下载图标
  @Prop({
    type: Boolean,
    default: true
  })
  showDownloadIcon!: boolean;

  // 下载后的文件名称
  @Prop({
    type: String,
    default: "DdLine"
  })
  fileName!: string;

  @Prop({
    type: String,
    // required:true,
    default: "4%"
  })
  leftspace!: string;

  @Prop({
    type: String,
    // required:true,
    default: "6%"
  })
  rightspace!: string;

  @Prop({
    type: String,
    default: "3%"
  })
  bottomspace!: string;

  @Prop({
    type: Array,
    required: true,
    default: []
  })
  xData!: any;

  @Prop({
    type: Array,
    required: true,
    default: []
  })
  seriesData!: any;

  @Prop({
    type: String,
    default: "DdLine图表"
  })
  seriesName!: string;

  @Watch("chartStyle")
  getChartStyle() {
    this.myChart.resize();
  }

  @Watch("xData")
  getXData() {
    this.draw();
  }

  @Watch("seriesData", { deep: true })
  getSeriesData() {
    this.draw();
  }

  mounted() {
    this.$nextTick(() => {
      this.draw();
    });
  }

  draw() {
    // 绘制图表
    if (document.getElementById(this.id)) {
      this.myChart =
        this.myChart == null
          ? echarts.init(document.getElementById(this.id))
          : this.myChart;
      this.myChart.setOption({
        color: this.itemColor,
        tooltip: {
          padding: this.tooltippadding,
          // formatter: this.formatter,
          trigger: "axis",
          backgroundColor: "rgba(50, 50, 50, 0.7)",
          borderColor: "rgb(51, 51, 51)",
          borderWidth: 0,
          textStyle: {
            color: "#fff",
            fontSize: 12,
            fontFamily: "微软雅黑"
          }
        },
        toolbox: {
          right: this.toolboxRight,
          top: this.toolboxTop,
          // left:this.toolboxLeft,
          show: this.showDownloadIcon,
          iconStyle: {
            normal: {
              borderColor: "#5c6781"
            },
            emphasis: {
              borderColor: "#4990ff"
            }
          },
          orient: "horizontal",
          itemGap: 10,
          itemSize: 60,
          showTitle: true,
          feature: {
            saveAsImage: {
              show: true,
              name: this.fileName,
              title: " ",
              icon: "image://" + defaultImange
            }
          }
        },
        grid: {
          left: this.leftspace,
          right: this.rightspace,
          bottom: this.bottomspace,
          containLabel: true
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: this.xData,
          axisLine: {
            lineStyle: {
              color: "#dddde6",
              width: 1 //这里是为了突出显示加上的，可以去掉
            }
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: "#758697",
              fontFamily: "微软雅黑"
            }
          }
        },
        yAxis: {
          type: "value",
          splitLine: {
            show: false
          },
          axisLine: {
            lineStyle: {
              color: "#dddde6",
              width: 1 //这里是为了突出显示加上的，可以去掉
            }
          },
          axisLabel: {
            show: true,
            interval: "auto",
            textStyle: {
              color: "#758697",
              fontFamily: "微软雅黑"
            }
          }
        },
        series: this.seriesData
        // series : [{
        //     name:this.seriesName,
        //     type:'bar',
        //     barWidth: '36px',
        //     data:this.yData
        // }]
      });
      var _this = this;
      window.addEventListener("resize", function() {
        _this.myChart.resize();
      });
    }
  }
}
</script>  